<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../Style/style.css">
    <script src="../../Script/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.TabContainer");
    </script>
</head>
<body>
<div id="mainTabContainer" data-dojo-type="dijit.layout.TabContainer"
     data-dojo-props='useMenu:true, style:"width:400px;height:20em;"'>
    <div id="tab1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='titile:"Tab 1", iconClass:"plusIcon"'>
        This is tab1.
    </div>
    <div id="tab2" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='titile:"Tab 2", iconClass:"noteIcon",selected:true'>
        This is tab2.
    </div>
    <div id="tab3" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='titile:"Tab 3", iconClass:"dijitEditorIcon dijitEditorIconSave", closable:true'>
        This is tab3.
    </div>
    <div id="tab4" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='titile:"Tab 4", iconClass:"dijitEditorIcon dijitEditorIconCut", closable:true'>
        This is tab4.
    </div>
    <div id="tab5" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='titile:"Tab 5", iconClass:"dijitEditorIcon dijitEditorIconCopy", closable:true'>
        This is tab5.
    </div>
    <div id="tab6" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='titile:"Tab 6", iconClass:"dijitEditorIcon dijitEditorIconPaste", closable:true'>
        This is tab6.
    </div>
    <div id="tab7" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='titile:"Tab 7", iconClass:"dijitEditorIcon dijitEditorIconCopy", closable:true'>
        This is tab7.
    </div>
</div>
</body>
</html>
